<template>
  <div class="cla">
    <el-form :inline="true" style="margin-top:20px">
      <el-form-item>
        <el-button
          type="primary"
          @click="dialogFormVisible=true"
          style="margin-left:900px;right:0px;"
          el-icon-plus
        >增加分类</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="5" v-for="item in items" :key="item.id" style="margin:5px">
        <el-card :body-style="{ padding: '2px',margin:'0 4px' }">
          <div style="padding: 6px">
            <span>{{item.name}}</span>
            <div class="bottom clearfix" style="margin-left:130px">
              <el-button type="danger" @click="handleDelete(item.id)" size="mini" icon="el-icon-delete">删除</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="添加分类"
      :visible.sync="dialogFormVisible"
      width="400px"
      style="text-align:center"
    >
      <el-form
        :model="pojo"
        :rules="rules"
        ref="pojoForm"
        label-width="100px"
        label-position="right"
        style="width:300px"
      >
        <el-form-item label="类型" prop="name">
          <el-input v-model="pojo.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" style="float:left">取 消</el-button>
        <el-button type="primary" @click="addDate('pojoForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import categoryApi from "@/api/category";
export default {
  data() {
    return {
      items: [

      ],
      dialogFormVisible: false,
      pojo: {},
      rules: {
        name: [{ required: true, message: "类型不能为空", trigger: "blur" }]
      }
      //   currentDate: new Date({})
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      categoryApi.list().then(response => {
        const res = response.data;
        this.items = res.data.list;
      });
    },
    addDate(pojoName) {
      this.$refs[pojoName].validate(valid => {
        if (valid) {
          console.log(pojoName);
          categoryApi.add(this.pojo).then(response => {
            const resp = response.data;
            if (resp.flag) {
              this.fetchData();
              this.dialogFormVisible = false; //关闭窗口
            } else {
              this.$message({
                message: resp.message,
                type: "warning"
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    //删除分类
    handleDelete(id) {
      console.log(id);
      this.$confirm("确认删除这条记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          categoryApi.deleteById(id).then(response => {
            const resp = response.data;
            if (resp.flag) {
              this.fetchData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style scoped>
.cla {
  position: absolute;
  width: 100%;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>